<template>
    <div style="width: 100%; height: 100%;">
        <div class="pie-chart-container"> <!-- 账龄分析的环形图表 -->

        </div>
    </div>    
</template>

<script>
import echarts from 'echarts'; 
export default {
    name: 'tipChart',
    props: {
        colors: {
            type: Array,
            default: () => ['#027aff', '#0443a3', '#ebb265', '#00adbe', '#ac65eb', '#4AEAB0', '#0073F2']
        },
        chartData: { // 图表数据对象,通过props传过来
            type: Object,
            default: () => ({
                data: []
            })
        }
    },
    mounted() {
        this.generateChart();
    },
    methods: {
        generateChart() { // 生成图表
            let myChart = echarts.init(this.$el.querySelector('.pie-chart-container'));
            let echartData = this.chartData.data;
            let legendData = this.chartData.data.map(item => item.name);
            let color = this.colors;
            let options = {
                color: color,
                // title: [{
                //     text: '账龄分析',
                //     color: 'rgba(0,0,0,0.85)',
                //     top: '34%',
                //     left: 'center'
                // }],
                clockwise: false, // 饼图的扇区是否顺时针排布，默认是逆时针
                tooltip: {
                    show: true,
                    backgroundColor: '#FFFFFF',
                    textStyle: {
                        color: 'rgba(0,0,0,0.65)'
                    },
                    extraCssText: 'box-shadow: 0 0 3px rgba(0, 0, 0, 0.3);',
                    formatter: function(params) {
                        // return `${params.marker}${params.name} <br /><span style="margin-right: 16px"></span>${params.value}万`;
                        return `${params.marker}${params.name} <br />${params.value}万`;
                    }
                },
                legend: {
                    icon: "none",
                    orient: 'vertical',
                    data: legendData,
                    top: 'middle',
                    right: '10%',
                    textStyle:  {
                        color: "rgba(0,0,0,0.85)",
                        fontWeight: 'bold',
                        rich: {
                            a: {
                                width: 30,
                                fontSize: 16,
                                fontWeight: 'bold',
                                align: 'left'
                            },
                            b: {
                                width: 40,
                                align: 'left'
                            },
                            circle0: {
                                width: 8,
                                height: 8,
                                backgroundColor: color[0],
                                borderRadius: 4
                            },
                            circle1: {
                                width: 8,
                                height: 8,
                                backgroundColor: color[1],
                                borderRadius: 4
                            }
                        },
                    },
                    formatter: function (name) {
                        // console.log(name);
                        let index = 0;
                        var datas = options.series[0].data;
                        datas.forEach(function (v, i) {
                            if (v.name == name) {
                                index = i;
                            }
                        })
                        return [`{circle${index}|}{b| ${name} }`,`{a| ${datas[index].value}万}`].join('');
                    }
                },
                series: [{
                    type: 'pie',
                    radius: ['35%', '66%'],
                    center: ['40%', '50%'],
                    data: echartData,
                    avoidLabelOverlap: false,
                    hoverAnimation: false,
                    labelLine: {
                        show: true,
                        length: 20,
                        length2: 16,
                        lineStyle: {
                            color: 'rgba(0,0,0,0.25)'
                        }
                    },
                    label: {
                        show: true,
                        position: 'outside',
                        formatter: params => {
                            return (
                                '{name|' + params.percent + '%}\n{value|}'
                            );
                        },
                        rich: {
                            name: {
                                fontSize: 14,
                                padding: [-36, 5, -20, 5],
                                color: 'rgba(0,0,0,0.65)',
                                fontWeight: 'bold'
                            },
                            value: {
                                backgroundColor: 'rgba(0,0,0,0.25)',
                                width: 1,
                                height: 8,
                                padding: [4, 4, 0, -4]
                            }
                        }
                    },
                }]
            };
            myChart.setOption(options);
        }
    }            
}
</script>